<template>
    <div class="list-audio-component-container">
        <!-- 单图-->
        <div class="list-audio-component-item-single" v-if="info.content.stills&&info.content.stills!=''">

            <div class="list-audio-component-item-single-bob">
                <a :href="info.content.modelUrl" class="list-audio-component-title-single">
                    {{info.content.name}}
                </a>
                <div class="single-component-takeup"></div>
                <a :href="info.content.modelUrl" class="list-audio-component-info-single">
                    <img class="list-audio-component-info-img" src="../assets/images/tag_audio_icon.png"/>
                    {{info.content.channelName}}&nbsp;&nbsp;&nbsp;&nbsp;{{info.content.displayTime &&
                    this.toCommonTime(info.content.displayTime)}}
                </a>
            </div>
            <img src="../assets/images/shortvideo.png" class="list-audio-component-img-cover"/>
            <a :href="info.content.modelUrl" class="list-audio-component-img-single">
                <img v-lazy="addCmdUrl(info.content.stills,400,100)"/>
            </a>
            <div class="clearBoth"></div>
        </div>
        <!-- 无图 -->
        <div class="list-audio-component-item-single non-img" v-else>

            <div class="list-audio-component-item-single-bob">
                <a :href="info.content.modelUrl" class="list-audio-component-title-single">
                    {{info.content.name}}
                </a>
                <div class="single-component-takeup"></div>
                <a :href="info.content.modelUrl" class="list-audio-component-info-single">
                    <img class="list-audio-component-info-img" src="../assets/images/tag_audio_icon.png"/>
                    {{info.content.channelName}}&nbsp;&nbsp;&nbsp;&nbsp;{{info.content.displayTime &&
                    this.toCommonTime(info.content.displayTime)}}
                </a>
            </div>

            <div class="clearBoth"></div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        }
    }
</script>

<style scoped>
    .list-audio-component-container {
        width: 100%;
    }

    .list-audio-component-item-single {
        width: 100%;
        padding: 0.6rem 0;
        border-bottom: 1px solid #EDEDED;
        position: relative;
        box-sizing: border-box;
    }

    .list-audio-component-item-single-bob {
        width: 100%;
        height: 4.6rem;
        position: relative;
    }

    .list-audio-component-title-single {
        width: 100%;
        font-size: 18px;
        line-height: 22px;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-decoration: none;
    }

    .list-audio-component-info-single {
        font-size: 10px;
        color: #999999;
        line-height: 11px;
        display: block;
        text-decoration: none;
    }

    /* 单图模式下标题、介绍内容左浮动 */
    .list-audio-component-info-single {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    }

    .list-audio-component-item-single {
        padding-right: 6.9rem;
    }

    .list-audio-component-item-single.non-img {
        padding-right: 0;
    }

    .list-audio-component-item-single.non-img .list-audio-component-item-single-bob {
        height: auto;
        padding-bottom: 1.1rem;
    }

    .list-audio-component-info-single {
        bottom: 0;
        position: absolute;
        left: 0;
    }

    .list-audio-component-info-img {
        height: 0.9rem;
        position: relative;
        top: 0.13rem;
    }

    .list-audio-component-img-single {
        display: block;
        width: 6.9rem;
        height: 4.6rem;
        position: absolute;
        top: 0.6rem;
        right: 0;
    }

    .list-audio-component-img-single img {
        width: 100%;
        height: 100%;
    }

    .list-audio-component-img-triple img, .list-audio-component-img-big img {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
    }

    .list-audio-component-img-cover {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        top: 2.15rem;
        right: 2.7rem;
        z-index: 10;
    }
</style>